﻿@each $name, $value in $position-values {
    .top-#{$name} {
        top: #{$value} !important;
    }

    .bottom-#{$name} {
        bottom: #{$value} !important;
    }

    .left-#{$name} {
        left: #{$value} !important;
    }

    .right-#{$name} {
        right: #{$value} !important;
    }
}

.translate-middle {
    transform: translate(-50%, -50%) !important;
}

.translate-middle-x {
    transform: translateX(-50%) !important;
}

.translate-middle-y {
    transform: translateY(-50%) !important;
}
